<template>
    <div class="page-hire-book-step" id="bookStep">
        <div class="step-prev" :initial-swipe="currentStep" :class="{visible: currentStep > 0}">
            <span @click="prevStep">上一步</span>
        </div>
        <div class="scrollview">
            <van-swipe 
                ref="stepSwipe" 
                :touchable="false" 
                :loop="false" 
                :show-indicators="false"
                @change="onStepChange">
                <van-swipe-item>
                    <h4 class="step-title">您所在的城市及房屋面积？</h4>
                    <app-step1 ref="step1"></app-step1>
                </van-swipe-item>
                <van-swipe-item>
                    <h4 class="step-title">您的项目设计类别是下面哪类？</h4>
                    <app-step2 ref="step2"></app-step2>
                </van-swipe-item>
                <van-swipe-item>
                    <h4 class="step-title">
                        根据房屋面积测算，以下设计预算中，您可以接收的范围？
                        <small>(*设计费通常占装修预算的10%-15%左右)</small>
                    </h4>
                    <app-step3 ref="step3"></app-step3>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="step-next">
            <van-button type="primary" @click="nextStep">{{buttonText}}</van-button>
        </div>
    </div>
</template>


<script>
import appStep1 from './step1'
import appStep2 from './step2'
import appStep3 from './step3'
import { postDemand } from '../../api/demand'
export default {
    name: 'postStep',
    props: {
        designerId: String
    },
    components: {
        appStep1, appStep2, appStep3
    },
    data(){
        return {
            currentStep: 0,
            bookForm: {
                memberId: localStorage.customerId,
                designerId: this.designerId
            },
            orderId: '',
            money: '',
            lastStep: 2,
        }
    },
    computed: {
        buttonText(){
            return this.lastStep === this.currentStep ? '立即发布' : '下一步'
        }
    },
    methods: {
        onStepChange(index){
            this.currentStep = index
            try {
                const box = document.querySelectorAll('#bookStep .van-swipe-item')[index]
                this.$refs.stepSwipe.$el.style.height = box.clientHeight + 'px'
            } catch (e) {
                console.log(e)
            }
        },

        nextStep(){
            if(this.currentStep === this.lastStep){
                this.onOrder()
            }
            if(this.currentStep < this.lastStep){
                this.$refs.stepSwipe.swipeTo(++this.currentStep)
            }
        },
        prevStep(){
            if(this.currentStep === 0) return
            this.$refs.stepSwipe.swipeTo(--this.currentStep)
        },

        onOrder(){
            const payload = Object.assign(
                this.bookForm,
                this.$refs['step1'].form,
                this.$refs['step2'].form,
                this.$refs['step3'].form)
            postDemand(payload).then(rsp => {
                if(rsp.code === 200){
                    this.$toast('需求发布成功')
                    this.$router.replace({name: 'postResult'})
                }
            })
        }
    },
    mounted(){
        this.$refs.stepSwipe.swipeTo(this.currentStep)
    }
}
</script>

<style lang="less">
.page-hire-book-step{
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    .step-prev{
        padding: 15px;
        font-size: 12px;
        color:@primary;
        font-weight: bold;
        opacity: 0;
        &.visible{
            opacity: 1;
        }
    }
    .step-next{
        padding: 30px;
        .van-button{
            width: 100%;
            border-radius: 22px;
        }
    }
    .scrollview{
        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .van-swipe{
        .van-swipe-item{
            height: auto !important;
            font-size: 14px;
            .step-title{
                margin-bottom: 10px;
                font-size: 16px;
                line-height: 1.8;
                padding: 0 15px;
                small{
                    font-size: 12px;
                    color: #999;
                }
            }
        }
    }

    
}
</style>
